<script setup>

import {Iphone, Location, OfficeBuilding, Tickets, User} from "@element-plus/icons-vue";
import { reactive, ref} from 'vue'
import { ElMessage } from 'element-plus'
import  request  from "@/utils/amusement"
let storedData = sessionStorage.getItem('loginUser');
let loginUser = JSON.parse(storedData);

//修改学生按钮状态
const dialogAddState = ref(false)
//修改商家按钮状态
const dialogAddMallState = ref(false)
//修改老师按钮状态
const dialogAddTeacherState = ref(false)
//修改管理员按钮状态
const dialogAddAdminState = ref(false)

// 取出 loginUser 对象中的 学生 属性
let sid = loginUser.sid;
let sname = loginUser.sname;
let gender = loginUser.gender;
let phone = loginUser.phone;
let address = loginUser.address;

// 取出 loginUser 对象中的 商家 属性
let mname = loginUser.mname;
let maddress = loginUser.maddress;
let mrange = loginUser.mrange;
let canteen = loginUser.canteen;
let mphone = loginUser.mphone;
let mid = loginUser.mid;

// 取出 loginUser 对象中的 老师 属性
let tid = loginUser.tid;
let tname = loginUser.tname;
let dept = loginUser.dept;

// 取出 loginUser 对象中的 管理员 属性
let aid = loginUser.aid;
let aname = loginUser.aname;
let aphone = loginUser.aphone;

const formAddAdminData = {
  aid : aid ,
  aname : aname ,
  aphone : aphone ,
}
const formAddTeacherData = {
  tid : tid ,
  tname : tname ,
  dept : dept ,
}
const formAddMallData = {
  mid: mid,
  mname : mname ,
  maddress : maddress ,
  mrange : mrange ,
  canteen: canteen,
  mphone: mphone,
}
const formAddData = {
  sid : sid ,
  sname : sname ,
  gender : gender ,
  phone: phone,
  address: address,
}

// 新增表单绑定数据模型
const formAddAdmin = reactive({...formAddAdminData})
// 新增表单绑定数据模型
const formAddTeacher = reactive({...formAddTeacherData})
// 新增表单绑定数据模型
const formAddMall = reactive({...formAddMallData})
// 新增表单绑定数据模型
const formAdd = reactive({...formAddData})


const dialogAddOnAdminReset = () => {
  // 清空表单数据
  Object.assign(formAddAdmin , formAddAdminData)
  // 关闭对话框
  dialogAddAdminState.value = false
}
const dialogAddOnTeacherReset = () => {
  // 清空表单数据
  Object.assign(formAddTeacher , formAddTeacherData)
  // 关闭对话框
  dialogAddTeacherState.value = false
}
const dialogAddOnMallReset = () => {
  // 清空表单数据
  Object.assign(formAddMall , formAddMallData)
  // 关闭对话框
  dialogAddMallState.value = false
}
const dialogAddOnReset = () => {
  // 清空表单数据
  Object.assign(formAdd , formAddData)
  // 关闭对话框
  dialogAddState.value = false
}

//这个是商家信息修改
//先不着急改
const dialogAddOnMallSubmit = () => {
  // 数据提交到服务器
  // 服务器端返回成功 ：清空表单，关闭对话框，更新表格内容
  request({
    method: 'put',
    url:'/can2/update',
    data: JSON.stringify(formAddMall),
    headers: { 'content-type': "application/json;charset=UTF-8" },
  }).then(req => {
    if (200 == req.data.errorCode) {
      ElMessage({
        type: 'success',
        message: "修改成功"
      });
      mname =formAddMall.mname;
      maddress = formAddMall.maddress;
      mrange = formAddMall.mrange;
      canteen = formAddMall.canteen;
      mphone = formAddMall.mphone;
    } else {
      ElMessage({
        type: 'error',
        message: req.data.msg
      });
    }
  });
  dialogAddMallState.value = false
}



//这个是管理员信息修改
//先不着急改
const dialogAddOnAdminSubmit = () => {
  // 数据提交到服务器
  // 服务器端返回成功 ：清空表单，关闭对话框，更新表格内容
  request({
    method: 'put',
    url:'/firstadmin2/update',
    data: JSON.stringify(formAddAdmin),
    headers: { 'content-type': "application/json;charset=UTF-8" },
  }).then(req => {
    if (200 == req.data.errorCode) {
      ElMessage({
        type: 'success',
        message: "修改成功"
      });
      aid =formAddAdmin.aid;
      aname = formAddAdmin.aname;
      aphone = formAddAdmin.aphone;
    } else {
      ElMessage({
        type: 'error',
        message: req.data.msg
      });
    }
  });
  dialogAddAdminState.value = false
}
//这个是老师信息修改
//先不着急改
//这个是老师信息修改
//先不着急改
const dialogAddOnTeacherSubmit = () => {
  // 数据提交到服务器
  // 服务器端返回成功 ：清空表单，关闭对话框，更新表格内容
  request({
    method: 'put',
    url: '/admin/teacher2/update',
    data: JSON.stringify(formAddTeacher),
    headers: {'content-type': "application/json;charset=UTF-8"},
  }).then(req => {
    if (200 == req.data.errorCode) {
      ElMessage({
        type: 'success',
        message: "修改成功"
      });
      tid = formAddTeacher.tid;
      tname = formAddTeacher.tname;
      dept = formAddTeacher.dept;
    } else {
      ElMessage({
        type: 'error',
        message: req.data.msg
      });
    }
  });
  dialogAddTeacherState.value = false
}
//这个是学生信息修改
const dialogAddOnSubmit = () => {
  // 数据提交到服务器
  // 服务器端返回成功 ：清空表单，关闭对话框，更新表格内容
  request({
    method: 'put',
    url:'/sys/funstudent2/update',
    data: JSON.stringify(formAdd),
    headers: { 'content-type': "application/json;charset=UTF-8" },
  }).then(req => {
    if (200 == req.data.errorCode) {
      ElMessage({
        type: 'success',
        message: "修改成功"
      });
      sid =formAdd.sid;
      sname = formAdd.sname;
      gender = formAdd.gender;
      phone = formAdd.phone;
      address = formAdd.address;
    } else {
      ElMessage({
        type: 'error',
        message: req.data.msg
      });
    }
  });
  dialogAddState.value = false
}

</script>

<template>
  <!--  管理员信息-->
  <div class="main" v-if="loginUser.aname">
    <h2>管理员信息</h2>
    <el-descriptions class="margin-top" title="资料卡片:" :column="2" size="default" border>
      <template #extra>
        <el-button @click="dialogAddAdminState=true" type="primary">修改个人信息</el-button>
      </template>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            id号
          </div>
        </template>
        <!--        {{ sid.replace(/"/g, '') }}-->
        {{formAddAdmin.aid}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            姓名
          </div>
        </template>
        <!--        {{ sname.replace(/"/g, '') }}-->
        {{ formAddAdmin.aname }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            联系电话
          </div>
        </template>
        {{ formAddAdmin.aphone}}
        <!--        {{ gender.replace(/"/g, '') }}-->
      </el-descriptions-item>
    </el-descriptions>
  </div>

  <!--  老师信息-->
  <div class="main" v-if="loginUser.tname">
    <h2>老师信息</h2>
    <el-descriptions class="margin-top" title="资料卡片:" :column="2" size="default" border>
      <template #extra>
        <el-button @click="dialogAddTeacherState=true" type="primary">修改个人信息</el-button>
      </template>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            教师编号
          </div>
        </template>
        <!--        {{ sid.replace(/"/g, '') }}-->
        {{formAddTeacher.tid}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            姓名
          </div>
        </template>
        <!--        {{ sname.replace(/"/g, '') }}-->
        {{ formAddTeacher.tname }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            教学年级
          </div>
        </template>
        {{ formAddTeacher.dept}}
        <!--        {{ gender.replace(/"/g, '') }}-->
      </el-descriptions-item>

    </el-descriptions>
  </div>

  <!--  商家个人信息-->
  <div class="main" v-if="loginUser.mname">
    <h2>商家信息</h2>
    <el-descriptions class="margin-top" title="资料卡片:" :column="2" size="default" border>
      <template #extra>
        <el-button @click="dialogAddMallState=true" type="primary">修改商家信息</el-button>
      </template>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            店名
          </div>
        </template>
        <!--        {{ sid.replace(/"/g, '') }}-->
        {{formAddMall.mname}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            地址
          </div>
        </template>
        <!--        {{ sname.replace(/"/g, '') }}-->
        {{ formAddMall.maddress }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            类型
          </div>
        </template>
        {{ formAddMall.mrange}}
        <!--        {{ gender.replace(/"/g, '') }}-->
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            餐厅
          </div>
        </template>
        {{ formAddMall.canteen }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            联系电话
          </div>
        </template>
        {{ formAddMall.mphone }}
      </el-descriptions-item>
    </el-descriptions>
  </div>

  <!--  学生个人信息-->
  <div class="main" v-if="loginUser.sname">
    <h2>个人信息</h2>
    <el-descriptions class="margin-top" title="资料卡片:" :column="2" size="default" border>
      <template #extra>
        <el-button @click="dialogAddState=true" type="primary">修改个人信息</el-button>
      </template>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            学号
          </div>
        </template>
        <!--        {{ sid.replace(/"/g, '') }}-->
        {{formAdd.sid}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            姓名
          </div>
        </template>
        <!--        {{ sname.replace(/"/g, '') }}-->
        {{ formAdd.sname }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            性别
          </div>
        </template>
        {{ formAdd.gender}}
        <!--        {{ gender.replace(/"/g, '') }}-->
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            手机
          </div>
        </template>
        {{ formAdd.phone}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            地址
          </div>
        </template>
        {{ formAdd.address.replace(/"/g, '') }}
      </el-descriptions-item>
    </el-descriptions>
  </div>

  <!-- 修改商家态框 -->
  <el-dialog v-model="dialogAddMallState" title="商家信息" width="700">
    <div>
      <el-form ref="formAddRef" :model="formAddMall" label-width="120px">
        <el-form-item prop="price" label="店名">
          <el-input v-model="formAddMall.mname"></el-input>
        </el-form-item>
        <el-form-item prop="sname" label="地点">
          <el-input v-model="formAddMall.maddress"></el-input>
        </el-form-item>
        <el-form-item prop="sgender" label="类别">
          <el-input v-model="formAddMall.mrange"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="餐厅">
          <el-input v-model="formAddMall.canteen" ></el-input>
        </el-form-item>
        <el-form-item prop="address" label="联系电话">
          <el-input v-model="formAddMall.mphone" ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddOnMallReset">取消</el-button>
        <el-button type="primary"  @click="dialogAddOnMallSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 修改管理员态框 -->
  <el-dialog v-model="dialogAddAdminState" title="管理员信息" width="700">
    <div>
      <el-form ref="formAddRef" :model="formAddAdmin" label-width="120px">
        <el-form-item prop="price" label="管理员id">
          <el-input v-model="formAddAdmin.aid":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="sname" label="管理员姓名">
          <el-input v-model="formAddAdmin.aname":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="sgender" label="管理员电话">
          <el-input v-model="formAddAdmin.aphone"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddOnAdminReset">取消</el-button>
        <el-button type="primary"  @click="dialogAddOnAdminSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 修改教师态框 -->
  <el-dialog v-model="dialogAddTeacherState" title="教师信息" width="700">
    <div>
      <el-form ref="formAddRef" :model="formAddTeacher" label-width="120px">
        <el-form-item prop="price" label="教师编号">
          <el-input v-model="formAddTeacher.tid":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="sname" label="姓名">
          <el-input v-model="formAddTeacher.tname":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="sgender" label="教学年级">
          <el-input v-model="formAddTeacher.dept" :formatter="attributeFormatter"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddOnTeacherReset">取消</el-button>
        <el-button type="primary"  @click="dialogAddOnTeacherSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 修改模学生态框 -->
  <el-dialog v-model="dialogAddState" title="个人简介" width="700">
    <div>
      <el-form ref="formAddRef" :model="formAdd" label-width="120px">
        <el-form-item prop="price" label="学号">
          <el-input v-model="formAdd.sid":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="sname" label="姓名">
          <el-input v-model="formAdd.sname":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="sgender" label="性别">
          <el-input v-model="formAdd.gender":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="手机">
          <el-input v-model="formAdd.phone" ></el-input>
        </el-form-item>
        <el-form-item prop="address" label="地址">
          <el-input v-model="formAdd.address" ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddOnReset">取消</el-button>
        <el-button type="primary"  @click="dialogAddOnSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>



<style scoped>
.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 20px;
  height: 300px;
}

.main {
  width: 1200px;
  margin: 20px auto;
  height: 540px;
}
</style>